<template>
  <div class="dialog-content dialog1">
    <template v-if="show === 1">
      <div class="title">{{$t('subaccount.create')}}</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="name">
          <el-input v-model="ruleForm.name" :placeholder="$t('subaccount.subaccount_info')"></el-input>
        </el-form-item>
        <small class="info">
          <template v-if="showInfo">{{$t('subaccount.create_info5')}}</template>
          <template v-else>{{$t('subaccount.create_info3')}}</template>
          <!-- {{$t('subaccount.create_info1')}} -->
          <br/>
          <template v-if="showInfo">* {{$t('subaccount.create_info6')}}</template>
          <template v-else>* {{$t('subaccount.create_info4')}}</template>
          <!-- * {{$t('subaccount.create_info2')}} -->
        </small>
        <div class="bt-group">
          <label v-for="(v,k) in currencyList" :key="k" class="button" :class="{active:v === ruleForm.coin_type}"><i class="icon" :class="'icon-'+v"/>{{v.toUpperCase()}}<input hidden type="radio" :value="v" v-model="ruleForm.coin_type"></label>
        </div>
        <div class="dialog-footer">
          <el-button type="primary" round @click="next">{{$t('forget.next')}}</el-button>
        </div>
      </el-form>
    </template>
    <template v-if="show === 2">
      <div class="title">{{$t('subaccount.choose_bill')}}</div>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2">
        <el-form-item prop="balance_type" class="mb0">
          <el-radio-group v-model="ruleForm2.balance_type">
            <el-radio label="FPPS"></el-radio>
            <el-radio :label="$t('subaccount.iscomming')" disabled></el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="title">{{$t('subaccount.coin_address')}}<span class="sub" v-if="showInfo">({{$t('subaccount.create_address_info')}})</span></div>
        <el-form-item prop="address">
          <el-input v-model="ruleForm2.address" :placeholder="addressPlaceholder"></el-input>
        </el-form-item>
        <small class="info">{{$t('subaccount.conin_info')}}</small>
        <div class="dialog-footer">
          <el-button type="primary" round @click="submit">{{$t('btn.submit')}}</el-button>
          <button type="button" class="btn" @click="show = 1;">{{$t('subaccount.back')}}</button>
        </div>
      </el-form>
    </template>
  </div>
</template>

<script>
import { createSubaccount } from '@/api';
import { mapGetters, mapMutations } from 'vuex';

export default {
  data() {
    return {
      currencyList: ['btc', 'bch', 'bsv', 'eth', 'dcr', 'zec', 'etp'],
      show: 1,
      addressPlaceholder: `${this.$t('subaccount.inputAddress')} BTC ${this.$t('subaccount.coin_address')}（${this.$t('subaccount.xuanTian')}）`,
      ruleForm: {
        name: '',
        coin_type: 'btc',
      },
      rules: {
        name: [
          { required: true, message: this.$t('subaccount.subaccount_name'), trigger: 'change' },
          { max: 30, min: 4, message: this.$t('subaccount.subaccount_info'), trigger: 'change' },
        ],
      },
      ruleForm2: {
        balance_type: 'FPPS',
        address: '',
      },
      rules2: {},
    };
  },
  computed: {
    ...mapGetters(['subCuid']),
    showInfo() {
      return ['btc', 'bch', 'bsv'].indexOf(this.ruleForm.coin_type) === -1;
    },
  },
  methods: {
    ...mapMutations(['SET_SUB_NAME', 'SET_SUB_CUID', 'SET_SUB_ID', 'SET_SUB_COIN_TYPE', 'SET_SUB_ADDRESS', 'SET_SUB_BALANCE_TYPE']),
    next() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.show = 2;
        }
      });
    },
    submit() {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          createSubaccount(Object.assign({}, this.ruleForm, {
            address: this.ruleForm2.address.trim(),
            balance_type: this.ruleForm2.balance_type,
          })).then((res) => {
            if (res.data.status === 1) {
              this.$notify({
                message: this.$t('subaccount.create_success'),
                type: 'success',
                duration: 2000,
                showClose: false,
              });
              // if (!this.subCuid) {
              const data = res.data.data;
              this.SET_SUB_CUID(data.cuid);
              this.SET_SUB_NAME(data.name);
              this.SET_SUB_COIN_TYPE(data.coin_type);
              this.SET_SUB_ID(data.config_id);
              this.SET_SUB_ADDRESS(data.address);
              this.SET_SUB_BALANCE_TYPE(data.balance_type);
              // }
              this.$emit('toggleDialog', { showDialog: false, refresh: true });
            } else {
              this.$message.error(this.$t(`api.${res.data.errcode}`));
            }
          }).catch(() => {
            this.$message.error(this.$t('error.catchError'));
          });
        }
      });
    },
  },
  watch: {
    'ruleForm.coin_type': {
      immediate: true,
      handler(v) {
        if (v === 'btc' || v === 'bch' || v === 'bsv') {
          this.addressPlaceholder = `${this.$t('subaccount.inputAddress')} ${this.ruleForm.coin_type.toUpperCase()} ${this.$t('subaccount.coin_address')}（${this.$t('subaccount.xuanTian')}）`;
          this.rules2 = {};
        } else {
          this.addressPlaceholder = `${this.$t('subaccount.inputAddress')} ${this.ruleForm.coin_type.toUpperCase()} ${this.$t('subaccount.coin_address')}`;
          this.rules2 = { address: [{ required: true, message: this.$t('subaccount.no_address'), trigger: 'change' }] };
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-content{
  .title{
    .sub{
      font-size: 14px;
      color: red;
      margin-left: 5px;
    }
  }
  .bt-group{
    margin: 24px 0 30px;
  }
}
</style>
